
<template>
    <van-nav-bar :title="route.meta.title" left-arrow @click-left="router.back()" fixed placeholder></van-nav-bar>
    <van-form @submit="onSubmit" class="box">
        <van-cell-group inset>
            <van-field v-model="title" name="title" label="标题" placeholder="标题"
                :rules="[{ required: true, message: '请填写标题' }]" />
            <van-field v-model="desc" name="desc" label="描述" placeholder="描述"
                :rules="[{ required: true, message: '请填写描述' }]" />
            <van-field v-model="pic_url" name="pic_url" label="图片路径" placeholder="图片路径"
                :rules="[{ required: true, message: '请填写图片网络路径' },
                { pattern: /^(http|ftp|https):\/\/([\w\-]+(\.[\w\-]+)*\/)*[\w\-]+(\.[\w\-]+)*\/?(\?([\w\-\.,@?^=%&:\/~\+#]*)+)?/, message: '请输入正确地址' }]" />
            <van-field v-model="detail" type="textarea" rows="5" autosize maxlength="200" show-word-limit name="detail"
                label="内容" placeholder="内容" :rules="[{ required: true, message: '请填写内容' }]" />
        </van-cell-group>
        <div style="margin: 16px;">
            <van-button round block type="primary" :loading="adding" native-type="submit">
                提交
            </van-button>
        </div>
    </van-form>
</template>
    
<script setup>
import { useRoute, useRouter } from 'vue-router';
import { addArticle } from '@/api/article.js'
import { showSuccessToast } from 'vant';
import { ref } from 'vue';
const title = ref('');
const desc = ref('');
const pic_url = ref('');
const detail = ref('');
// 进度条
const adding = ref(false);
const route = useRoute()
const router = useRouter();
const onSubmit = async (values) => {
    // 开始加载
    adding.value = true;
    await addArticle(values)
    // 加载完成
    adding.value = false;
    title.value = ''
    title.desc = ''
    title.pic_url = ''
    title.detail = ''
    router.replace('/recommend');
    showSuccessToast({
        message: '新增成功',
        duration: 1500,
    });
};
</script>
    
<style lang="scss" scoped>
.box {
    margin-top: 20px;
}
</style>